<template>
  <div class="list-page">
    <div class="list-page-search" v-if="tableInfo.showSearch">
      <NForm inline :model="tableInfo.queryForm" label-placement="left">
        <NFormItem label="用户">
          <y-selectpcuser v-model="tableInfo.queryForm.user_id" />
        </NFormItem>
        <NFormItem label="关联资源">
          <NInput
            v-model:value="tableInfo.queryForm.query"
            placeholder="请输入资源标题"
            clearable
            style="width: 200px"
          />
        </NFormItem>
        <n-form-item label="分类">
          <n-select
            v-model:value="tableInfo.queryForm.title"
            :options="reportTitleEnum"
            label-field="label"
            placeholder="请选择分类"
            clearable
            value-field="value"
            style="width: 200px"
          />
        </n-form-item>
        <n-form-item label="状态">
          <n-select
            v-model:value="tableInfo.queryForm.status"
            :options="reportStatusEnum"
            label-field="label"
            placeholder="请选择状态"
            clearable
            value-field="value"
            style="width: 200px"
          />
        </n-form-item>
        <NFormItem>
          <NButton type="primary" @click="queryData">
            <template #icon>
              <n-icon>
                <i class="esayIcon esayIcon-sousuo"></i>
              </n-icon>
            </template>
            <span>搜索</span>
          </NButton>
        </NFormItem>
      </NForm>
    </div>
    <div class="list-page-main">
      <div class="pb20 flex flex-between">
        <div></div>
        <div>
          <n-button
            tertiary
            circle
            @click="tableInfo.showSearch = !tableInfo.showSearch"
          >
            <template #icon>
              <i class="esayIcon esayIcon-sousuo"></i>
            </template>
          </n-button>
        </div>
      </div>

      <NDataTable
        :scroll-x="1200"
        style="flex: 1"
        flex-height
        :columns="columns"
        :row-key="rowKey"
        :loading="tableInfo.listLoading"
        :data="tableInfo.tableData"
      />
      <div class="pagination mt20">
        <NPagination
          v-model:page="tableInfo.queryForm.pageNo"
          :page-count="tableInfo.total"
          :page-sizes="tableInfo.pageSizes"
          show-quick-jumper
          show-size-picker
          @updatePage="pageChange"
          @updatePageSize="sizeChange"
        />
      </div>
    </div>
    <photo-detail ref="photoRef" />
    <user-detail ref="detailRef" @childer="handChilder" />
    <user-childer ref="childerRef" />
  </div>
</template>

<script setup lang="ts">
import { h, defineAsyncComponent, ref } from 'vue'
import {
  NButton,
  NDataTable,
  NForm,
  NFormItem,
  NIcon,
  NSwitch,
  NPagination,
  NInput,
  NSelect
} from 'naive-ui'
import type { DataTableColumns } from 'naive-ui'
import { useApi } from '@/hooks/useApi'
import reportApi from '@/service/api/photo/report'
import YSelectpcuser from '@/components/yang/yselectpcuser/index.vue'
import reportTitleEnum from '@/enum/reportTitleEnum'
import reportStatusEnum from '@/enum/reportStatusEnum'
const UserDetail = defineAsyncComponent(
  () => import('@/views/operation/user/components/Detail.vue')
)
const PhotoDetail = defineAsyncComponent(
  () => import('@/views/photo/list/components/PhotoDetail.vue')
)
const UserChilder = defineAsyncComponent(
  () => import('@/views/operation/user/components/UserChilder.vue')
)
const photoRef = ref()
const handDetail = (row: any) => {
  photoRef.value.open(row.photo_id)
}

const detailRef = ref()
const handUser = (row: any) => {
  detailRef.value.open(row.user_id)
}

const childerRef = ref()
const handChilder = (row: any) => {
  childerRef.value.open(row)
}

const rowKey = (row: any) => row.id
const { pageChange, sizeChange, tableInfo, queryData } = useApi({
  getData: reportApi.list,
  dataMap: (data: any) => {
    return data.map((el: any) => {
      el.loading = false
      return el
    })
  },
  initForm: {
    user_id: null,
    title: null,
    status: null
  }
})
/**
 *  获取列表
 * */
const columns: DataTableColumns<any> = [
  {
    title: '用户',
    key: 'nickname',
    align: 'center',
    render(row: any) {
      return h(
        'div',
        {
          class: 'cursor-pointer',
          onClick: () => handUser(row)
        },
        { default: () => row.nickname }
      )
    }
  },
  {
    title: '资源标题',
    key: 'resoucename',
    align: 'center',
    render(row: any) {
      return h(
        'div',
        {
          class: 'cursor-pointer',
          onClick: () => handDetail(row)
        },
        { default: () => row.photo_name }
      )
    }
  },
  {
    title: '分类',
    key: 'title'
  },
  {
    title: '描述',
    key: 'content',
    width: 300,
    ellipsis: true
  },
  {
    title: '举报日期',
    key: 'create_at'
  },
  {
    title: '是否处理',
    key: 'status',
    width: 100,
    align: 'center',
    render(row: any) {
      return h(NSwitch, {
        value: row.status,
        loading: row.loading,
        rubberBand: false,
        checkedValue: 1,
        uncheckedValue: 0,
        ['on-update:value']: (checked: string) => {
          row.loading = true
          reportApi
            .updStatus({
              id: row.id,
              status: checked
            })
            .then(({ code }) => {
              if (code === 200) {
                row.status = checked
              }
              row.loading = false
            })
        }
      })
    }
  }
]
</script>

<style lang="scss" scoped></style>
